<template>
	<view class="container">
		<view class="form-group">
			<view class="group-label">大小</view>
			<radio-group @change="radioChange">
				<label class="radio"><radio value="10" checked />10以内</label>
				<label class="radio"><radio value="20" />20以内</label>
				<label class="radio"><radio value="50" />50以内</label>
			</radio-group>
		</view>
		<view class="form-group">
			<view class="group-label">数量</view>
			<picker @change="bindPickerChange" :value="0" :range="subNumList">
				<view class="picker-text">{{subNum}}题</view>
			</picker>
		</view>
		<view class="form-group">
			<view class="group-label">类型</view>
			<radio-group @change="typeChange">
				<label class="radio"><radio value="1" />练习</label>
				<label class="radio"><radio value="2" checked/>计时</label>
			</radio-group>
		</view>
		<view class="tips">提示：输入正确答案按键盘的确定，自动进入下一题</view>
		<button class="button" @click="toDetail">开始</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bitNum:10,
				subNum: 5,
				subNumList: [5,10,20,30,50],
				type: 2,
				mathType: 1,
			};
		},
		methods: {
			radioChange(e) {
				this.bitNum = e.detail.value;
			},
			bindPickerChange(e) {
				this.subNum = this.subNumList[e.detail.value];
			},
			typeChange(e) {
				this.type = e.detail.value;
			},
			toDetail() {
				uni.navigateTo({
					url: `/pages/detail/detail?bitNum=${this.bitNum}&subNum=${this.subNum}&type=${this.type}&mathType=${this.mathType}`
				})
			}
		},
		created() {
			this.mathType = this.$route.query.type
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 40upx;
	}
	.form-group {
		display: flex;
		align-items: center;
		margin-bottom: 60upx;
		.group-label {
			margin-right: 20upx;
			font-size: 36upx;
			font-weight: bold;
			white-space: nowrap;
		}
		.radio {
			display: inline-block;
			margin-right: 20upx;
			:nth-child(3n) {
				margin-bottom: 20upx;
			}
		}
	}
	.tips {
		color: #666
	}
	.button {
		margin-top: 100upx;
	}
	.picker-text {
		text-decoration: underline;
		color: royalblue;
	}
</style>
